<div class="cell small-4"></div>

<div class="cell small-4">
    <h4>Farado</h4>
    <p>{{ tr.pages.login.caption }}</p>

    <form action="/" method="post">
        <div class="row">
            <div class="small-12 columns">
                <label for="user">{{ tr.pages.login.login }}</label>
                <input
                    type="text"
                    id="user"
                    name="user"
                    placeholder="{{ tr.pages.login.loginPlaceholder }}">
            </div>
        </div>

        <div class="row">
            <div class="small-12 columns">
                <label for="password">{{ tr.pages.login.password }}</label>
                <input
                    type="password"
                    name="password"
                    id="password"
                    placeholder="{{ tr.pages.login.passwordPlaceholder }}">
            </div>
        </div>

        <div class="row">
            <div class="small-12 columns">
                <input
                    type="submit"
                    value="{{ tr.pages.login.submit }}"
                    class="button">
            </div>
        </div>
    </form>
</div>

<div class="cell small-4"></div>

<!-- Всплывающие сообщения пользователю -->
<div style="position: fixed; bottom: 0; right: 0;">
    {{# sessionMessages }}
        <div class="callout {{ type }}" data-closable>
            <h5 class="retejo-session-message-header">{{ caption }}</h5>
            <p>{{ text }}</p>
            <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    {{/ sessionMessages }}

    <!-- Всплывающие сообщения удаляются через 5 секунд -->
    <script>
        $(document).ready(function() {
            setTimeout(function() {
                $('.callout').remove();
            }, 5000);
        });
    </script>
</div>
